<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
    <div id="root">
<!--        <app></app>-->
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        //创建学生组件(子组件 放在父组件之前)
        const student = {
            template:`
              <div>
                <h3>学生姓名:{{name}}</h3>
                <h3>学生年龄:{{age}}</h3>
              </div>
            `,
            data(){
                return {
                    name:'姚文昕',
                    age:22
                }
            }
        }
        //创建学校组件
        const school = {
            template:`
                <div>
                  <h2>学校名称:{{name}}</h2>
                  <h2>学校地址:{{address}}</h2>
                  <student></student><!--子组件写在父组件内-->
                </div>
            `,
            data() {
                return {
                    name: '武威职业学院',
                    address: '武威市凉州区皇台路'
                }
            },
            //注册子组件
            components: {
                student
            }
        }
        //创建hello组件
        const hello = {
            template:`
                <div>
                  {{msg}}
                </div>
            `,
            data() {
                return {
                    msg:'Hello Xccit!'
                }
            }
        }
        //创建app组件管理所有组件
        const app = {
            template:`
                <div>
                  <hello></hello>
                  <school></school>
                </div>
            `,
            components:{
                hello,
                school
            }
        }
        new Vue({
            template:'<app></app>',/*将app组件加进vm模板*/
            el:'#root',
            //注册组件
            components:{
                app
            }
        })
    </script>
</body>
</html>